// 1 导入react
import React from 'react'
import ReactDOM from 'react-dom'

// 引入css文件
import "./index.css"

//2 创建react元素
// const title=React.createElement('h1',null,'Hello React 脚手架')

//React元素的属性名使用驼峰命名法
//特殊属性名 class->className for->htmlFor tabindex->tabIndex
//没有子节点的React元素可以用/>结束
//推荐使用小括号 包含JSX语法 从而避免JS中的自动插入分号陷阱



const name = 'jack'
const age = 19


/**
 * 
 * 条件渲染
 */
const isLoading = true
// const loadData=()=>{
//     if(isLoading){
//         return <div>loading...</div>
//     }
//     return <div>数据加载完毕,此处显示加载后的数据</div>
// }

//三元表达式
// const loadData = () => {
//    return isLoading ? (<div>loading...</div>) : (<div>数据加载完毕,此处显示加载后的数据</div>)
// }

//逻辑与运算符
const loadData = () => {
    return isLoading && (<div>loading...</div>)
}

//列表渲染
const group = [
    { id: 1, name: '张三' },
    { id: 2, name: '李四' },
    { id: 3, name: '王五' },
    { id: 4, name: '赵六' }
]

//遍历数据添加key属性

//如果要渲染一组数据 应该使用数据的map方法
//注意:渲染列表时应该添加key属性 key属性的值要保证唯一
//原则: map()遍历谁 就给谁添加key属性
//注意: 经量避免使用索引号作为key
const list = (
    <ul>
        {group.map(item => <li key={item.id}>{item.name}</li>)}
    </ul>
)

// 行内样式
const styleTag = (
    <h1 style={{ color: 'red', backgroudColor: 'skyblue' }} >
        JSX 行内样式
    </h1>
)
// class样式
const styleTag2 = (
    <h4 className='claName' >
        JSX Class 样式
    </h4>
)

// React 完全利用JS语法本身的能力来编写UI 
// 而不是造轮子增强HTML功能

const title = (
    <h2 className='title' title="这是title" >Hello JSX {name} ,{age}
        <br />
        <span>这是span元素 </span>
        <h3>
            条件渲染
            {loadData()}
        </h3>
        <span>
            列表渲染
            {list}
        </span>
        <span>
            {styleTag}
            {styleTag2}
        </span>
    </h2>)
//3 渲染react元素
ReactDOM.render(title, document.getElementById('root'))

//推荐使用JSX语法创建React元素